<template>
  <div class="diskInfoWrap">
    <div class="head">
      <p class="colCLas"></p>
      <p class="info">已开发票管理</p>
    </div>

    <el-form
        :model="searchParams"
        size="small"
        label-width="100px"
        class="formInline"
    >
      <el-row>
        <el-col :span=6>
          <el-form-item
              label="购买方名称"
          >
            <el-input
                v-model="searchParams.gmfmc"
                placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span=6>
          <el-form-item
              label="数据来源"
          >
            <dict-select v-model="searchParams.sjly" :dict-code="DictCode.VMS_SJLY" style="width: 100%"></dict-select>
          </el-form-item>
        </el-col>
        <el-col :span=6>
          <el-form-item
              label="发票号码"
          >
            <el-input
                v-model="searchParams.fphm"
                placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span=6>
          <el-form-item
              label="发票状态"
          >
            <dict-select v-model="searchParams.fpzt" :dict-code="DictCode.VMS_FPZT" style="width: 100%"></dict-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span=6>
          <el-form-item
              label="发票类型"
          >
            <dict-select v-model="searchParams.fplx" :dict-code="DictCode.VMS_FPLX" style="width: 100%"></dict-select>
          </el-form-item>
        </el-col>
        <el-col :span=6>
          <el-form-item
              label="开票日期"
          >
            <el-date-picker
                v-model="date1"
                type="daterange"
                range-separator="~"
                value-format="yyyy-MM-dd"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span=6>
          <el-form-item
              label="上传状态"
          >
            <dict-select v-model="searchParams.sczt" :dict-code="DictCode.VMS_SCZT" style="width: 100%"></dict-select>
          </el-form-item>
        </el-col>
        <el-col :span=6>
          <div style="float: right">
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button type="primary" @click="onResize">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>

    <el-button
        type="primary"
        size="small"
        @click="uploadSelected"
        style="margin: 4px 0"
    >
      上传
    </el-button>
    <el-button @click="getHistory" size="small" style="margin: 0 2px 0 12px">
      板式文件预览
    </el-button>
    <el-button
        type="primary"
        @click="exportFn"
        size="small"
    >
      下载
    </el-button>


    <tableList
        :showSelection="true"
        :loading="loading"
        border
        :heightMin="165"
        :keySet="keySet2"
        :autoHeight="true"
        ref="multipleTable"
        :tableData="listDetails2"
        :paginationShow="true"
        :pageNumber="pages.current"
        :pageSize="pages.size"
        :total="pages.total"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
        @handleSelectionChange="handleSelectionChange"
    >
      <template #invoiceState="{row}">
        <div :class="row.fpzt == '红冲'?'redBG':'bg'">
          {{ row.fpzt }}
        </div>
      </template>
    </tableList>


    <downloadComp ref='downloadComp'/>
    <previewComp ref='previewComp'/>
  </div>
</template>

<script>
import mixinTable from '@/mixin/mtable.js'
import getHistory from '../baseInfo/components/getHistory.vue'
import tableList from '@/components/tableList/index.vue'
import downloadComp from './downloadComp.vue'
import previewComp from './preViewComp.vue'
import {throttle} from 'lodash'
import {getList, upload} from "@/api/invoicedInfo";
import DictSelect from "@/views/invoiceTemplate/components/DictSelect/DictSelect.vue";
import {DictCode} from "@/utils/DictConstant";

export default {
  name: 'invoicedInfo',
  computed: {
    DictCode() {
      return DictCode
    }
  },
  mixins: [mixinTable],
  data() {
    return {
      date1: '',
      value9: false,
      listDetails2: [],
      selectList: [],
      detailTableData: [],
      keySet2: [
        {
          label: '发票状态',
          englishName: 'invoiceState',
          width: 'labelWidth',
          isSlot: true,
          slotName: 'invoiceState',
        },
        {
          label: '发票号码',
          englishName: 'fphm',
          width: 180
        },
        {
          label: '（购买方）统一社会信用代码/纳税人识别号/身份证件号码',
          englishName: 'gmfnsrsbh',
          width: 180

        },
        {
          label: '(购买方)名称',
          englishName: 'gmfmc',
          width: 200
        },
        {
          label: '合计税额',
          englishName: 'hjse',
          width: 'labelWidth'
        },
        {
          label: '价税合计',
          englishName: 'jshj',
          width: 'labelWidth'
        },
        {
          label: '开票日期',
          englishName: 'kprq',
          width: 150
        },
        {
          label: '开票人',
          englishName: 'kpr',
          width: 'labelWidth'

        },
        {
          label: '上传状态',
          englishName: 'sczt',
          width: 'labelWidth'

        },
        {
          label: '上传结果',
          englishName: 'scjg',
          width: 'labelWidth'

        },
        {
          label: '数据来源',
          englishName: 'sjly',
          width: 'labelWidth'

        },
        {
          label: '受理流水号',
          englishName: 'sllsh',
          width: 'labelWidth'

        },
        {
          label: '对应红字信息编码',
          englishName: 'hzqrxxdbh',
          width: 'labelWidth'

        },
        {
          label: '对应蓝字发票号码',
          englishName: 'dylzfphm',
          width: 165
        },
        {
          label: '备注',
          englishName: 'bz',
          width: 200
        },
      ],
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleSelectionChange(val) {
      this.selectList = val.ids || [];
    },
    onSubmit() {
      let params = {
        select1: this.searchParams.select1,
        input1: this.searchParams.input1,
      }
      this.getList(params)
    },
    onResize() {
      this.onResizeFn()
      this.date1 = []
      this.getList()
    },
    getList: throttle(async function () {
      try {
        if(this.$refs.multipleTable.$refs.table){
          this.$refs.multipleTable.$refs.table.clearSelection()
        }
      } catch (error) {
        
      }

      this.loading = true
      let params = {
        startTime: this.date1[0],
        endTime: this.date1[1],
        pageNo: this.pages.current,
        pageSize: this.pages.size,
        ...this.searchParams
      }
      let {data, code, message} = await getList(params);
      if (code == 200) {
        this.loading = false
        this.listDetails2 = data.records
        this.pages.total = data.total
        this.pages.current = data.current
        this.pages.size = data.size
      } else {
        this.loading = false
        this.$message({
          type: 'success',
          message: message,
        })
      }
    }, 500),
    uploadSelected() {
      let params = this.selectList.map(item => {
        return item.fphm
      })
      // 如果有已上传或未上传数据 抛出错误信息  退出函数
      this.$alert('上传所选数据，调用接口', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showCancelButton: true,
        type: 'warning',
      })
          .then(async () => {
            const {code, msg, data} = await upload({fphm: params});
            if (code == 200) {
              this.$message({
                type: 'success',
                message: data,
              })
              this.selectList = []
              await this.getList()
            }
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            })
          })
    },
    getHistory() {
      if (this.selectList.length !== 1) {
        this.$message.warning('请选择一条记录');
        return;
      }
      this.$refs.previewComp.show(this.selectList[0].fphm);
    },
    exportFn() {
      if (this.selectList.length === 0) {
        this.$message.warning('请先勾选一条数据！')
      } else {
        this.detailTableData = this.selectList;
        let flag = false;
        this.detailTableData.forEach((item) => {
          // 这里有个类型判断， 必须是开具成功的才能下载
          // if(item.invoicingStatus!='1'){ //只有开具成功的才能下载
          //   flag = true;
          // }
        })
        if (flag) {
          this.$message.warning('只有开具成功的发票才能进行下载！')
        } else {
          this.$refs.downloadComp.show(this.detailTableData)
        }
      }
    },
  },
  components: {
    DictSelect,
    tableList,
    getHistory,
    downloadComp,
    previewComp
  },
}
</script>

<style lang="scss" scoped>
@import '@/style/variables.scss';

.diskInfoWrap {
  box-sizing: border-box;

  .head {
    display: flex;
    height: 18px;
    align-items: center;
    margin-bottom: 4px;
    margin-top: 4px;

    .colCLas {
      width: 4px;
      height: 100%;
      background-color: $allBg;
      margin-right: 12px;
    }

    .info {
      height: 100%;
      display: flex;
      align-items: center;
    }
  }

  .redBG {
    background-color: red;
    border-radius: 10px;
    text-align: center;
    line-height: 150%;
  }

  .bg {
    text-align: center;
  }

  .formInline :deep .el-form-item--small {
    margin-bottom: 4px;
  }
}
</style>
